<template>
    <div>
        <el-container>
            <el-container>
                <el-header>
                    <el-menu mode="horizontal" background-color="#001529" text-color="#fff" active-text-color="#ffd04b"
                        :router="true">
                        <div style="float: right; height: 60px">
                            <el-popover placement="top" width="200" v-model="visible">
                                <p style="font-size:20px">退出系统</p>
                                <p style="font-size:17px">请确认是否退出系统？</p>
                                <div style="text-align: right; margin: 0">
                                    <el-button size="medium" style="border: #409EFF 1px solid;width:80px" type="text"
                                        @click="visible = false">取消</el-button>
                                    <el-button type="primary" style="width:80px" size="medium" @click="tuichu">
                                        退出</el-button>
                                </div>
                                <i class="el-icon-switch-button" slot="reference"></i>
                            </el-popover>
                            <span class="yhzw">智慧社区</span>
                        </div>
                    </el-menu>
                </el-header>
                <div class="c1">
                    <el-row>
                        <el-col :span="5" v-for="(c, index) in communityList" :key="index" class="col01">
                            <el-card :body-style="{ padding: '0px' }" shadow="hover">
                                <img :src=c.fileUrl class="image">
                                <div style="padding: 14px; margin-left: auto;">
                                    <span>{{ c.communityName }}</span>
                                    <div>
                                        <span class="time">{{c.area+c.address}}</span>
                                    </div>
                                    <div class="bottom clearfix">
                                        <el-button type="text" class="button" @click="$router.push('/workbench')">管理</el-button>
                                        <el-button type="text" class="button" @click="updateCommunity(c)">编辑</el-button>
                                        <el-button type="text" class="button" @click="delCommunity(c.communityId)">删除</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>

                    </el-row>
                </div>
                <el-button style="margin-top: 40px;width: 50%;margin: 0 auto;" @click="$router.push('/addCommunity1')">新建小区</el-button>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            openList: ["1"],
            communityList: [],
            visible: false,
            userId: '',
            userName: ''
        }
    },
    created() {
        this.findall()
    },
    methods: {
        findall() {
            this.$axios
                .get("housingestate/community/findCommunity")
                .then(res => {
                    if (res.data.code == 20000) {
                        this.communityList = res.data.data.communityList
                        console.log(this.communityList)
                    } else {
                        this.error = res.data.data.error
                        this.$message({
                            type: 'error',
                            message: this.error
                        })
                    }
                });
        },
        delCommunity(communityId){
            this.$axios
                .get("housingestate/community/delCommunity/"+communityId)
                .then(res => {
                    if (res.data.code == 20000) {
                        this.findall()
                    } else {
                        this.error = res.data.data.error
                        this.$message({
                            type: 'error',
                            message: this.error
                        })
                    }
                });
        },
        updateCommunity(c){
            this.$router.push({path:'/updateCommunity1',query:{paramName:c}})
        },
        getUser() {
            this.userId = sessionStorage.getItem("tid")
            this.userName = sessionStorage.getItem("tname")
        },
        tuichu() {
            sessionStorage.setItem("token", '')
            this.$router.push({ path: "/" });
        },
    }
}
</script>

<style>
.c1 {
    width: 1300px;
    height: 600px;
    margin: 0 auto;
}

.col01 {
    margin-right: 20px;
    margin-top: 40px;
}
img{
    width: 200px;
    height: 170px;
}
.wrapper {
    height: 100vh;
    background-image: linear-gradient(to bottom right, #FC466B, #3F5EFB);
    overflow: hidden;
}

.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    /* float: right; */
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
}

.clearfix:after {
    clear: both
}

.el-header {
    padding: 0px 0px 0 0;
}

.daohanglan {
    width: 215px;
    border: none;
}

.box1 {
    height: 50px;
    font-family: "Arial Negreta", "Arial Normal", "Arial";
    font-weight: 700;
    font-size: 20px;
    color: #001529;
}

.box11 {
    padding: 0 60px 0 0;
}

.box12 {
    padding: 0 85px 0 0;
}

.el-submenu {
    margin: 8px;
}

.el-main {
    padding: 0px 0px 0px 0px;
}

.el-menu.el-menu--horizontal {
    border: none;
}

.el-icon-switch-button {
    font-size: 20px;
    color: #fff;
    margin: 20px 30px 0 0;
    cursor: pointer;
}

.yhzw {
    font-size: 17px;
    margin: 0px 40px 0 0;
    color: #fff;
}
</style>